import {
  getStatisticalSalesPerformance,
  GetStatisticalSalesPerformanceReq,
  GetStatisticalSalesPerformanceResp,
} from "@/services";
import { useUserStore } from "@/store";
import { useGetState, useSafeState, useUpdate } from "ahooks";
import { Image, List } from "antd-mobile";
import {
  EditSOutline,
  HistogramOutline,
  LeftOutline,
  SendOutline,
  SystemQRcodeOutline,
} from "antd-mobile-icons";
import React, { useEffect } from "react";
import { history } from "umi";

const Mine: React.FC = () => {
  const { userInfo, getUserInfo, userLogout } = useUserStore();
  const [staticDataList, setStaticDataList, getStaticDataList] = useGetState<
    GetStatisticalSalesPerformanceResp[]
  >([]);
  const update = useUpdate();

  //0-今日；1-本月；2-本年
  const getStatisticsRequest = async (type: number) => {
    const req: GetStatisticalSalesPerformanceReq = {
      userId: userInfo.onlyId,
      type, // 0-今日；1-本月；2-本年
    };
    const res = await getStatisticalSalesPerformance(req);
    if (res.code == 200) {
      const hisState = getStaticDataList();
      hisState[type] = res.data;
      setStaticDataList(hisState);
      update();
    }
  };

  useEffect(() => {
    if (userInfo.onlyId) {
      getStatisticsRequest(0);
      getStatisticsRequest(1);
      getStatisticsRequest(2);
    }
  }, [userInfo.onlyId]);

  const logoutHandle = () => {
    userLogout();
    history.replace("/login");
    window.location.reload();
  };

  return (
    <div>
      <div className="center pt-40px">
        <Image
          className="w-70px h-70px "
          width={70}
          height={70}
          src={require("@/assets/images/logo.png")}
          alt=""
        />
        <div className="mt-20px mb-10px text-gray-5 text-14px">
          帝房法拍管理系统移动端
        </div>
        <div className="mb-4px text-blue-6 font-bold text-18px">
          {userInfo.realName}
        </div>
        <div className="mb-20px text-gray-5">(当前用户)</div>
      </div>
      {/* // 统计 */}

      <div className="flex px-20px mt-10px justify-between bg-white py-10px">
        <div className="flex flex-col items-center">
          <div>
            <div className="text-24px text-blue-6">
              {staticDataList[0]?.quantityContract || 0}
            </div>
          </div>
          <div className="mt-10px text-14px"> 今日签约</div>
        </div>
        <div className="flex flex-col items-center">
          <div>
            <div className="text-24px text-blue-6">
              {staticDataList[1]?.quantityContract || 0}
            </div>
          </div>
          <div className="mt-10px text-14px"> 本月签约</div>
        </div>
        <div className="flex flex-col items-center">
          <div>
            <div className="text-24px text-blue-6">
              {staticDataList[2]?.quantityContract || 0}
            </div>
          </div>
          <div className="mt-10px text-14px"> 今年签约</div>
        </div>
      </div>
      <div className="flex px-20px mb-10px justify-between bg-white py-10px">
        <div className="flex flex-col items-center">
          <div>
            <div className="text-24px text-blue-6">
              {staticDataList[0]?.numberHits || 0}
            </div>
          </div>
          <div className="mt-10px text-14px"> 今日拍中</div>
        </div>
        <div className="flex flex-col items-center">
          <div>
            <div className="text-24px text-blue-6">
              {staticDataList[1]?.numberHits || 0}
            </div>
          </div>
          <div className="mt-10px text-14px"> 本月拍中</div>
        </div>
        <div className="flex flex-col items-center">
          <div>
            <div className="text-24px text-blue-6">
              {staticDataList[2]?.numberHits || 0}
            </div>
          </div>
          <div className="mt-10px text-14px"> 今年拍中</div>
        </div>
      </div>
      <div>
        <List>
          <List.Item
            prefix={<SystemQRcodeOutline />}
            onClick={() => {
              history.push("/modules/invite-qrcode");
            }}
          >
            邀请二维码
          </List.Item>

          <List.Item
            prefix={<EditSOutline />}
            onClick={() => {
              history.push("/modules/update-password");
            }}
          >
            修改密码
          </List.Item>
          <List.Item
            prefix={<SendOutline />}
            onClick={() => {
              logoutHandle();
            }}
          >
            <span className="text-red-6">退出登陆</span>
          </List.Item>
        </List>
      </div>
    </div>
  );
};

export default Mine;
